<template>
  <div class="global">
    <el-card>
      <el-button type="primary" @click="thpp">添加品牌</el-button>
      <el-table :data="tabledata" height="500" style="margin-top: 10px">
        <el-table-column label="#" type="index"></el-table-column>
        <el-table-column label="品牌名称" prop="tmName"></el-table-column>
        <el-table-column label="品牌LOGO" prop="logoUrl">
          <template v-slot="scope">
            <img
              style="width: 100px; height: 100px"
              :src="scope.row.logoUrl"
              alt=""
            />
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="scope">
            <el-button type="primary" @click="bianji(scope.row)"
              >编辑</el-button
            >
            <el-button type="warning" @click="shanchu(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="10"
        @current-change="handlechange"
        :total="total"
      />
      <el-dialog
        title="添加品牌"
        v-model="dialogVisible1"
        width="30%"
        :before-close="handleClose1"
      >
        <el-form v-model="form">
          <el-form-item label="品牌名称" required>
            <el-input placeholder="请输入" v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="品牌图片" required>
            <el-upload
              class="avatar-uploader"
              action="http://sph-api.atguigu.cn/admin/product/fileUpload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">确定</el-button>
            <el-button @click="handleClose1">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <el-dialog
        title="编辑品牌"
        v-model="dialogVisible2"
        width="30%"
        :before-close="handleClose2"
      >
        <el-form v-model="form1">
          <el-form-item label="品牌名称" required>
            <el-input placeholder="请输入" v-model="form1.tmName"></el-input>
          </el-form-item>
          <el-form-item label="品牌图片" required>
            <el-upload
              class="avatar-uploader"
              action="http://sph-api.atguigu.cn/admin/product/fileUpload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess1"
              :before-upload="beforeAvatarUpload1"
            >
              <img v-if="form1.logoUrl" :src="form1.logoUrl" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit2">确定</el-button>
            <el-button @click="handleClose1">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-card>
  </div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Calendar, Search, Plus } from "@element-plus/icons-vue";
import instance from "../assets/axiosinstance";
const tabledata = ref([]);
const page = ref(1);
const imageUrl = ref("");
const limit = ref(10);
const dialogVisible1 = ref(false);
const pid = ref("");
const dialogVisible2 = ref(false);
const total = ref(0);
const form = ref({
  name: "",
  img: "",
});
const form1 = ref({});
const onSubmit = async () => {
  const res = await instance.post("/admin/product/baseTrademark/save", {
    id: 0,
    logoUrl: imageUrl.value,
    tmName: form.value.name,
  });
  console.log(res);
  if (res.code == 200) {
    dialogVisible1.value = false;
    getdata();
  }
};
const shanchu = (e) => {
  ElMessageBox.confirm("是否确认删除该条数据?", "Warning", {
    confirmButtonText: "OK",
    cancelButtonText: "Cancel",
    type: "warning",
  })
    .then(async () => {
      const res = await instance.delete(`/admin/product/baseTrademark/remove/${e}`);
      console.log(res);
      if (res.code == 200) {
        getdata();
      }
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "Delete canceled",
      });
    });
};
const onSubmit2 = async () => {
  const res = await instance.put(
    "/admin/product/baseTrademark/update",
    form1.value
  );
  console.log(res);
  if (res.code == 200) {
    dialogVisible2.value = false;
    getdata();
  }
};
const bianji = (e) => {
  dialogVisible2.value = true;
  form1.value = JSON.parse(JSON.stringify(e));
};
const handleAvatarSuccess = (e) => {
  console.log(e);
  imageUrl.value = e.data;
};
const handleAvatarSuccess1 = (e) => {
  console.log(e);
  form1.value.logoUrl = e.data;
};
const beforeAvatarUpload = () => {};
const thpp = () => {
  dialogVisible1.value = true;
  form.value = {
    name: "",
  };
  imageUrl.value = "";
};
const handleClose2 = () => {
  dialogVisible2.value = false;
};
const handleClose1 = () => {
  dialogVisible1.value = false;
  form.value = {
    name: "",
  };
  imageUrl.value = "";
};
const getdata = async () => {
  const res = await instance.get(
    `/admin/product/baseTrademark/${page.value}/${limit.value}`
  );
  tabledata.value = res.data.records;
  console.log(res);
  total.value = res.data.total;
};
const handlechange = (e) => {
  console.log(e);
  page.value = e;
  getdata();
};
onMounted(() => {
  getdata();
});
</script>
<style scoped>
.global {
  width: 100%;
  height: 100%;
}
</style>
<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>